<template>
  <div>
    <nut-uploader
      :url="uploadUrl"
      :headers="{ 'Content-Type': 'multipart/form-data' }"
      :before-delete="deleteFile"
      :file-list="fileList"
      @update:file-list="onFileListChange"
      multiple
    >
      <template #upload>
        <!-- Custom upload slot content -->
      </template>
    </nut-uploader>
    <ImagePreview :images="previewImages" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import ImagePreview from '@/components/ImagePreview.vue';

const props = defineProps({
  bizType: {
    type: Number,
    required: true,
  },
  bizSubType: {
    type: Number,
    required: true,
  },
  bizId: {
    type: [Number, String],
    required: true,
  },
  bizCode: {
    type: String,
    default: '',
  },
});

const fileList = ref([]);
const previewImages = ref([]);

const uploadUrl = computed(() => {
  return `/file/upload?module=2&bizType=${props.bizType}&bizSubType=${props.bizSubType}&bizId=${props.bizId}&bizCode=${props.bizCode}`;
});

function onFileListChange(val) {
  fileList.value = val;
  previewImages.value = val.map(file => file.url);
}

function deleteFile(file) {
  // Implement file deletion logic
}
</script>

<style scoped>
/* Add component-specific styles here */
</style>
